<template>
    <el-container>
		<!-- 头部 -->
        <el-header>
            <div>
                <img src="../assets/images/logo.png" alt="" />
                <span>Vue 商城管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <el-container>
			<!-- 侧边栏 -->
            <el-aside :width="collapse ? 'auto' : '250px'">
				<div class="toggle-button" @click="toggleCollapse">|||</div>
                <el-menu
                    background-color="#333744"
                    text-color="#fff"
                    active-text-color="#409EFF"
					:collapse="collapse"
					:collapse-transition="false"
					:router="true"
					:unique-opened="true"
					:default-active="activePath"
                >
                    <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
                        <template slot="title">
                            <i :class="icons[item.id]"></i>
                            <span>{{ item.authName }}</span>
                        </template>
						<el-menu-item :index="'/' + child.path + ''" v-for="child in item.children" :key="child.id" @click="saveActivePath('/' + child.path)">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>{{ child.authName }}</span>
							</template>
						</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
				<router-view></router-view>
			</el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
	data() {
		return {
			menuList: [], // 左侧列表
			icons: {
				125: 'iconfont icon-users',
				103: 'iconfont icon-lock_fill',
				101: 'iconfont icon-shangpin',
				102: 'iconfont icon-danju',
				145: 'iconfont icon-baobiao'
			},
			collapse: false, // 左侧导航显示与隐藏
			activePath: '' // 激活菜单项
		}
	},
	created() {
		this.getMenuList();
		this.saveActivePath(window.sessionStorage.getItem('activePath'));
	},
    methods: {
		// 退出
        logout() {
            window.sessionStorage.clear(); // 清空 sessionStorage 域
            this.$router.push('/login');
		},
		// 获取菜单
		async getMenuList() {
			const { data: res } = await this.$http.get('menus');
			if(res.meta.status !== 200) return this.$message.error(res.meta.msg);
			this.menuList = res.data;
			console.log(res);
		},
		// 控制左侧导航显示与隐藏
		toggleCollapse() {
			this.collapse = !this.collapse;
		},
		// 激活菜单项
		saveActivePath(activePath) {
			this.activePath = activePath;
			window.sessionStorage.setItem('activePath', activePath);
		}
    }
}
</script>

<style lang="less" scoped>
.el-container {
    height: 100%;
}
.el-header {
    background-color: #373d41;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    > div {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        img {
            height: 100%;
        }
        span {
            font-size: 26px;
        }
    }
    > button {
        align-self: center;
    }
}
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}
.el-main {
	background-color: #eaedf1;
}
.iconfont {
	padding-right: 10px;
}
.toggle-button {
	text-align: center;
    height: 25px;
	line-height: 24px;
	background-color: #4a5064;
	letter-spacing: 0.2em;
	color: #fff;
	cursor: pointer;
}
</style>